<template>
  <div class="admin-container">
    <!-- 顶部导航栏 -->
    <header class="admin-header">
      <h1>摄影工作室管理系统</h1>
    </header>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 侧边栏导航 -->
      <aside class="sidebar">
        <nav>
          <ul>
            <li
                :class="{ active: currentTab === 'photos' }"
                @click="currentTab = 'photos'"
            >
              <i class="fa fa-image"></i>
              <span>照片管理</span>
            </li>
            <li
                :class="{ active: currentTab === 'videos' }"
                @click="currentTab = 'videos'"
            >
              <i class="fa fa-video-camera"></i>
              <span>视频管理</span>
            </li>
            <li
                :class="{ active: currentTab === 'contacts' }"
                @click="currentTab = 'contacts'"
            >
              <i class="fa fa-address-book"></i>
              <span>联系方式管理</span>
            </li>
            <li
                :class="{ active: currentTab === 'password' }"
                @click="currentTab = 'password'"
            >
              <i class="fa fa-key"></i>
              <span>重置密码</span>
            </li>
          </ul>
        </nav>
      </aside>

      <!-- 内容区域 -->
      <section class="content-area">
        <!-- 照片管理 -->
        <div v-if="currentTab === 'photos'" class="tab-content">
          <div class="tab-header">
            <h2>照片管理</h2>
            <div class="action-buttons">
              <div class="search-box">
                <input
                    type="text"
                    v-model="photoSearchQuery"
                    placeholder="搜索照片..."
                    class="search-input"
                >
                <button class="search-btn" @click="filterPhotos">
                  <i class="fa fa-search"></i>
                </button>
              </div>
              <button class="add-btn" @click="showAddPhotoModal = true">
                <i class="fa fa-plus"></i> 添加照片
              </button>
            </div>
          </div>

          <!-- 照片列表 -->
          <div v-if="filteredPhotos.length > 0" class="media-grid">
            <div v-for="(photo, index) in filteredPhotos" :key="index" class="media-item">
              <!-- 媒体卡片内容（不变） -->
              <div class="media-preview">
                <img :src="photo.url" :alt="photo.alt" class="preview-img">
              </div>
              <div class="media-info">
                <h3>{{ photo.caption }}</h3>
                <p>{{ photo.alt }}</p>
                <div class="media-actions">
                  <button class="delete-btn" @click="deletePhoto(index)">
                    <i class="fa fa-trash"></i> 删除
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-data">
            <p>没有找到照片</p>
          </div>
        </div>

        <!-- 视频管理 -->
        <div v-if="currentTab === 'videos'" class="tab-content">
          <div class="tab-header">
            <h2>视频管理</h2>
            <div class="action-buttons">
              <div class="search-box">
                <input
                    type="text"
                    v-model="videoSearchQuery"
                    placeholder="搜索视频..."
                    class="search-input"
                >
                <button class="search-btn" @click="filterVideos">
                  <i class="fa fa-search"></i>
                </button>
              </div>
              <button class="add-btn" @click="showAddVideoModal = true">
                <i class="fa fa-plus"></i> 添加视频
              </button>
            </div>
          </div>
          <!-- 照片列表 -->
          <div v-if="filteredVideos.length > 0" class="media-grid">
            <div v-for="(video, index) in filteredVideos" :key="index" class="media-item">
              <div class="media-preview">
                <video :alt="video.alt" controls class="preview-video">
                  <source :src="video.url" type="video/mp4">
                  您的浏览器不支持视频播放
                </video>
              </div>
              <div class="media-info">
                <h3>{{ video.caption }}</h3>
                <p>{{ video.alt }}</p>
                <div class="media-actions">
                  <button class="delete-btn" @click="deleteVideo(index)">
                    <i class="fa fa-trash"></i> 删除
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-data">
            <p>没有找到视频</p>
          </div>
        </div>

        <!-- 联系方式管理 -->
        <div v-if="currentTab === 'contacts'" class="tab-content">
          <div class="tab-header">
            <h2>联系方式管理</h2>
          </div>

          <div class="contacts-form">
            <div class="form-group">
              <label for="qq">QQ:</label>
              <input
                  type="text"
                  id="qq"
                  v-model="contactInfo.qq"
                  class="form-control"
              >
            </div>

            <div class="form-group">
              <label for="wechat">微信:</label>
              <input
                  type="text"
                  id="wechat"
                  v-model="contactInfo.wechat"
                  class="form-control"
              >
            </div>

            <div class="form-group">
              <label for="email">邮箱:</label>
              <input
                  type="email"
                  id="email"
                  v-model="contactInfo.email"
                  class="form-control"
              >
            </div>

            <div class="form-actions">
              <button class="save-btn" @click="saveContactInfo">
                <i class="fa fa-save"></i> 保存修改
              </button>
            </div>
          </div>
        </div>

        <!-- 密码重置 -->
        <div v-if="currentTab === 'password'" class="tab-content">
          <div class="tab-header">
            <h2>重置密码</h2>
          </div>

          <div class="password-form">
            <div class="form-group">
              <label for="newPassword">新密码:</label>
              <input
                  type="password"
                  id="newPassword"
                  v-model="newPassword"
                  class="form-control"
                  :class="{ 'invalid': passwordError }"
                  placeholder="请输入新密码"
              >
            </div>

            <div class="form-group">
              <label for="confirmPassword">确认密码:</label>
              <input
                  type="password"
                  id="confirmPassword"
                  v-model="confirmPassword"
                  class="form-control"
                  :class="{ 'invalid': passwordError }"
                  placeholder="请再次输入密码"
              >
              <p v-if="passwordError" class="error-message">{{ passwordErrorMessage }}</p>
            </div>

            <div class="form-actions">
              <button class="save-btn" @click="resetPassword">
                <i class="fa fa-refresh"></i> 重置密码
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 添加/编辑照片模态框 -->
    <div v-if="showAddPhotoModal || showEditPhotoModal" class="modal-backdrop">
      <div class="modal">
        <div class="modal-header">
          <h3>{{ showAddPhotoModal ? '添加新照片' : '编辑照片' }}</h3>
          <button class="close-btn" @click="closePhotoModal">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <div class="modal-body">
          <div class="form-group">
            <label for="photoAlt">图片描述:</label>
            <input
                type="text"
                id="photoAlt"
                v-model="currentPhoto.alt"
                class="form-control"
                required
            >
          </div>

          <div class="form-group">
            <label for="photoCaption">图片标题:</label>
            <input
                type="text"
                id="photoCaption"
                v-model="currentPhoto.caption"
                class="form-control"
                required
            >
          </div>

          <div class="form-group">
            <label>上传图片:</label>
            <input
                type="file"
                accept="image/*"
                @change="handlePhotoUpload"
                class="file-input"
            >
          </div>

          <div v-if="currentPhoto.url" class="preview-container">
            <img :src="currentPhoto.url" :alt="currentPhoto.alt" class="modal-preview">
          </div>
        </div>

        <div class="modal-footer">
          <button class="cancel-btn" @click="closePhotoModal">取消</button>
          <button
              class="confirm-btn"
              @click="savePhoto"
              :disabled="!currentPhoto.alt || !currentPhoto.caption || !currentPhoto.url"
          >
            保存
          </button>
        </div>
      </div>
    </div>

    <!-- 添加/编辑视频模态框 -->
    <div v-if="showAddVideoModal || showEditVideoModal" class="modal-backdrop">
      <div class="modal">
        <div class="modal-header">
          <h3>{{ showAddVideoModal ? '添加新视频' : '编辑视频' }}</h3>
          <button class="close-btn" @click="closeVideoModal">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <div class="modal-body">
          <div class="form-group">
            <label for="videoAlt">视频描述:</label>
            <input
                type="text"
                id="videoAlt"
                v-model="currentVideo.alt"
                class="form-control"
                required
            >
          </div>

          <div class="form-group">
            <label for="videoCaption">视频标题:</label>
            <input
                type="text"
                id="videoCaption"
                v-model="currentVideo.caption"
                class="form-control"
                required
            >
          </div>

          <div class="form-group">
            <label>上传视频:</label>
            <input
                type="file"
                accept="video/*"
                @change="handleVideoUpload"
                class="file-input"
            >
          </div>

          <div v-if="currentVideo.url" class="preview-container">
            <video :alt="currentVideo.alt" controls class="modal-preview-video">
              <source :src="currentVideo.url" type="video/mp4">
              您的浏览器不支持视频播放
            </video>
          </div>
        </div>

        <div class="modal-footer">
          <button class="cancel-btn" @click="closeVideoModal">取消</button>
          <button
              class="confirm-btn"
              @click="saveVideo"
              :disabled="!currentVideo.alt || !currentVideo.caption || !currentVideo.url"
          >
            保存
          </button>
        </div>
      </div>
    </div>

    <!-- 确认删除模态框 -->
    <div v-if="showDeleteConfirm" class="modal-backdrop">
      <div class="modal confirm-modal">
        <div class="modal-header">
          <h3>确认删除</h3>
          <button class="close-btn" @click="showDeleteConfirm = false">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <div class="modal-body">
          <p>您确定要删除这个{{ deleteType }}吗？此操作不可撤销。</p>
        </div>

        <div class="modal-footer">
          <button class="cancel-btn" @click="showDeleteConfirm = false">取消</button>
          <button class="delete-confirm-btn" @click="confirmDelete">
            <i class="fa fa-trash"></i> 确认删除
          </button>
        </div>
      </div>
    </div>

    <!-- 通知提示 -->
    <div v-if="showNotification" class="notification" :class="notificationType">
      <p>{{ notificationMessage }}</p>
      <button class="close-notification" @click="showNotification = false">
        <i class="fa fa-times"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue';
import axios from "axios";

// 照片数据
const photos = ref([]);

// 视频数据
const videos = ref([]);

// 联系方式数据
const contactInfo = ref({
  qq: '',
  wechat: '',
  email: ''
})

// 密码重置相关数据
const newPassword = ref('');
const confirmPassword = ref('');
const passwordError = ref(false);
const passwordErrorMessage = ref('');

// 当前激活的标签页
const currentTab = ref('photos');

// 搜索相关
const photoSearchQuery = ref('');
const videoSearchQuery = ref('');

// 过滤后的照片和视频
const filteredPhotos = computed(() => {
  if (!photoSearchQuery.value) return photos.value;
  const query = photoSearchQuery.value.toLowerCase();
  return photos.value.filter(photo =>
      photo.alt.toLowerCase().includes(query) ||
      photo.caption.toLowerCase().includes(query)
  );
});

const filteredVideos = computed(() => {
  if (!videoSearchQuery.value) return videos.value;
  const query = videoSearchQuery.value.toLowerCase();
  return videos.value.filter(video =>
      video.alt.toLowerCase().includes(query) ||
      video.caption.toLowerCase().includes(query)
  );
});

// 模态框相关
const showAddPhotoModal = ref(false);
const showEditPhotoModal = ref(false);
const currentPhoto = ref({ url: '', alt: '', caption: '', file: '' });
const editingPhotoIndex = ref(-1);

const showAddVideoModal = ref(false);
const showEditVideoModal = ref(false);
const currentVideo = ref({ url: '', alt: '', caption: '', file: '' });
const editingVideoIndex = ref(-1);

// 删除确认相关
const showDeleteConfirm = ref(false);
const deleteType = ref(''); // 'photo' 或 'video'
const deleteIndex = ref(-1);

// 通知相关
const showNotification = ref(false);
const notificationMessage = ref('');
const notificationType = ref('success');

// 过滤照片
const filterPhotos = () => {
  // 利用computed属性自动过滤，这里只是触发一下
  photoSearchQuery.value = photoSearchQuery.value;
};

// 过滤视频
const filterVideos = () => {
  // 利用computed属性自动过滤，这里只是触发一下
  videoSearchQuery.value = videoSearchQuery.value;
};

// 关闭照片模态框
const closePhotoModal = () => {
  showAddPhotoModal.value = false;
  showEditPhotoModal.value = false;
  currentPhoto.value = { url: '', alt: '', caption: '' };
  editingPhotoIndex.value = -1;
};

// 关闭视频模态框
const closeVideoModal = () => {
  showAddVideoModal.value = false;
  showEditVideoModal.value = false;
  currentVideo.value = { url: '', alt: '', caption: '' };
  editingVideoIndex.value = -1;
};

// 处理照片上传
const handlePhotoUpload = (e) => {
  const file = e.target.files[0];
  if (file) {
    currentPhoto.value.file = file;
    const reader = new FileReader();
    reader.onload = (event) => {
      currentPhoto.value.url = event.target.result;
    };
    reader.readAsDataURL(file);
  }
};

// 处理视频上传
const handleVideoUpload = (e) => {
  const file = e.target.files[0];
  if (file) {
    currentVideo.value.file = file;
    const reader = new FileReader();
    reader.onload = (event) => {
      currentVideo.value.url = event.target.result;
    };
    reader.readAsDataURL(file);
  }
};

// 保存照片
const savePhoto = async () => {
  try {
    // 创建FormData对象
    const formData = new FormData();
    formData.append('file', currentPhoto.value.file);
    formData.append('alt', currentPhoto.value.alt);
    formData.append('caption', currentPhoto.value.caption);
    // 上传到后端接口
    const response = await axios.post('/api/photo/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data' // 指定表单数据类型
      }
    });
    if (response.data.code === 1) {
      showNotificationMessage('照片添加成功', 'success');
      closePhotoModal();
    } else {
      showNotificationMessage('照片添加失败：' + response.data.message, 'error');
    }
  } catch (error) {
    showNotificationMessage('上传失败：' + (error.response?.data?.message || '网络错误'), 'error');
  }
};

// 保存视频
const saveVideo = async () => {
  try {
    // 创建FormData对象
    const formData = new FormData();
    formData.append('file', currentVideo.value.file);
    formData.append('alt', currentVideo.value.alt);
    formData.append('caption', currentVideo.value.caption);
    // 上传到后端接口
    const response = await axios.post('/api/video/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data' // 指定表单数据类型
      }
    });
    if (response.data.code === 1) {
      showNotificationMessage('视频添加成功', 'success');
      closeVideoModal();
    } else {
      showNotificationMessage('视频添加失败：' + response.data.message, 'error');
    }
  } catch (error) {
    showNotificationMessage('上传失败：' + (error.response?.data?.message || '网络错误'), 'error');
  }
};

// 确认删除
const confirmDelete = async () => {
  if (deleteType.value === 'photo' && deleteIndex.value !== -1) {
    const response = await axios.delete(`/api/photo/${deleteIndex.value}`);
    console.log(response)
    showNotificationMessage('照片删除成功', 'success');
  } else if (deleteType.value === 'video' && deleteIndex.value !== -1) {
    const response = await axios.delete(`/api/video/${deleteIndex.value}`);
    console.log(response)
    showNotificationMessage('视频删除成功', 'success');
  }
  showDeleteConfirm.value = false;
  deleteIndex.value = -1;
  deleteType.value = '';
};

// 删除照片
const deletePhoto = (index) => {
  deleteType.value = 'photo';
  deleteIndex.value = photos.value[index].id;
  showDeleteConfirm.value = true;
};

// 删除视频
const deleteVideo = (index) => {
  deleteType.value = 'video';
  deleteIndex.value = videos.value[index].id;
  showDeleteConfirm.value = true;
};

// 保存联系方式
const saveContactInfo = async () => {
  console.log('保存联系方式：', contactInfo.value);
  try {
    const response = await axios.put('/api/studio_contact', {
      qq: contactInfo.value.qq,
      wechat: contactInfo.value.wechat,
      email: contactInfo.value.email
    });
    console.log(response)
  } catch (error) {
    // 接口请求失败 - 调用错误提示
    const errorMsg = error.response?.data?.error || '网络异常，请稍后重试';
    showNotificationMessage(errorMsg, 'failure');
  }
  showNotificationMessage('联系方式保存成功', 'success');
};

// 重置密码
const resetPassword = async () => {
  // 简单的密码验证
  if (!newPassword.value) {
    setPasswordError('请输入新密码');
    return;
  }

  if (newPassword.value.length < 6) {
    setPasswordError('密码长度不能少于6个字符');
    return;
  }

  if (newPassword.value !== confirmPassword.value) {
    setPasswordError('两次输入的密码不一致');
    return;
  }

  // 密码验证通过，执行重置操作
  passwordError.value = false;
  try {
    const response = await axios.post('/api/user/reset', {
      password: confirmPassword.value
    });
    if (response.data.code === 1)
      showNotificationMessage('密码重置成功', 'success');
  } catch (error) {
    // 接口请求失败 - 调用错误提示
    const errorMsg = error.response?.data?.error || '网络异常，请稍后重试';
    showNotificationMessage(errorMsg, 'failure');
  }
  // 清空输入框
  newPassword.value = '';
  confirmPassword.value = '';
};

// 设置密码错误信息
const setPasswordError = (message) => {
  passwordError.value = true;
  passwordErrorMessage.value = message;

  // 5秒后自动隐藏错误信息
  setTimeout(() => {
    passwordError.value = false;
  }, 5000);
};

// 显示通知消息
const showNotificationMessage = (message, type = 'success') => {
  notificationMessage.value = message;
  notificationType.value = type;
  showNotification.value = true;

  // 3秒后自动关闭
  setTimeout(() => {
    showNotification.value = false;
  }, 3000);
};

// 初始化
onMounted(async () => {
  try {
    const response = await axios.get('/api/studio_contact')
    contactInfo.value = response.data.data;
  } catch (error) {
    const errorMsg = error.response?.data?.error || '网络异常，请稍后重试';
    showNotificationMessage(errorMsg, 'failure');
  }
  try {
    const response = await axios.get('/api/photo/list')
    photos.value = response.data.data;
  } catch (error) {
    const errorMsg = error.response?.data?.error || '网络异常，请稍后重试';
    showNotificationMessage(errorMsg, 'failure');
  }
  try {
    const response = await axios.get('/api/video/list')
    videos.value = response.data.data;
  } catch (error) {
    const errorMsg = error.response?.data?.error || '网络异常，请稍后重试';
    showNotificationMessage(errorMsg, 'failure');
  }
});
</script>

<style>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f5f5f5;
  color: #333;
}

/* 布局样式 */
.admin-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.admin-header {
  background-color: #2c3e50;
  color: white;
  padding: 1rem 2rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.main-content {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 220px;
  background-color: #34495e;
  color: white;
  height: calc(100vh - 61px);
  position: sticky;
  top: 61px;
}

.content-area {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

/* 侧边栏导航 */
.sidebar ul {
  list-style: none;
}

.sidebar li {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sidebar li:hover {
  background-color: #2c3e50;
}

.sidebar li.active {
  background-color: #1abc9c;
  border-left: 4px solid #16a085;
}

.sidebar li i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}

/* 内容区域样式 */
.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}

.tab-header h2 {
  color: #2c3e50;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* 搜索框样式 */
.search-box {
  display: flex;
  align-items: center;
}

.search-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  outline: none;
  transition: border-color 0.3s;
}

.search-input:focus {
  border-color: #1abc9c;
}

.search-btn {
  background-color: #1abc9c;
  color: white;
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #16a085;
}

/* 按钮样式 */
.add-btn, .save-btn, .edit-btn, .delete-btn,
.confirm-btn, .cancel-btn, .delete-confirm-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.add-btn, .save-btn, .confirm-btn {
  background-color: #1abc9c;
  color: white;
}

.add-btn:hover, .save-btn:hover, .confirm-btn:hover {
  background-color: #16a085;
}

.edit-btn {
  background-color: #3498db;
  color: white;
}

.edit-btn:hover {
  background-color: #2980b9;
}

.delete-btn, .delete-confirm-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover, .delete-confirm-btn:hover {
  background-color: #c0392b;
}

.cancel-btn {
  background-color: #95a5a6;
  color: white;
}

.cancel-btn:hover {
  background-color: #7f8c8d;
}

.confirm-btn:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

/* 媒体列表样式 */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.media-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.media-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.media-preview {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f8f9fa;
}

.preview-img, .preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.media-item:hover .preview-img,
.media-item:hover .preview-video {
  transform: scale(1.05);
}

.media-info {
  padding: 1rem;
}

.media-info h3 {
  margin-bottom: 0.5rem;
  color: #2c3e50;
  font-size: 1.1rem;
}

.media-info p {
  color: #7f8c8d;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.media-actions {
  display: flex;
  gap: 0.5rem;
}

/* 表单样式 */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #2c3e50;
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-control:focus {
  border-color: #1abc9c;
  outline: none;
}

.form-control.invalid {
  border-color: #e74c3c;
}

.error-message {
  color: #e74c3c;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.form-actions {
  margin-top: 2rem;
}

/* 联系方式表单和密码表单 */
.contacts-form, .password-form {
  max-width: 600px;
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 模态框样式 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}

.confirm-modal {
  max-width: 400px;
}

.modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  color: #2c3e50;
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.close-btn {
  background: none;
  border: none;
  color: #7f8c8d;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s;
}

.close-btn:hover {
  color: #e74c3c;
}

/* 文件上传和预览 */
.file-input {
  display: block;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.preview-container {
  margin-top: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.modal-preview {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.modal-preview-video {
  width: 100%;
  max-height: 300px;
}

/* 通知样式 */
.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  color: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  z-index: 1001;
  animation: slideIn 0.3s ease-out;
}

.notification.success {
  background-color: #2ecc71;
}

.notification.error {
  background-color: #e74c3c;
}

.close-notification {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
}

/* 无数据提示 */
.no-data {
  text-align: center;
  padding: 3rem;
  color: #7f8c8d;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 动画 */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
  }

  .sidebar ul {
    display: flex;
    overflow-x: auto;
  }

  .sidebar li {
    flex: 1;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
  }

  .sidebar li.active {
    border-left: none;
    border-bottom: 4px solid #16a085;
  }

  .action-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    width: 100%;
  }

  .search-input {
    flex: 1;
  }

  .media-grid {
    grid-template-columns: 1fr;
  }
}
</style>
